<template>
  <div class="bar-chart-container">
    <div ref="chartRef" class="bar-chart"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import * as echarts from "echarts";

const chartRef = ref<HTMLElement | null>(null);
;
onMounted(() => {
  // 初始化 ECharts 实例
  const myChart = echarts.init(chartRef.value!);
  const option = {
    tooltip : {
      trigger: 'item',
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },

    visualMap: {
      show: false,
      min: 80,
      max: 600,
      inRange: {
        colorLightness: [0, 1]
      }
    },
    series : [
      {
        name:'访问来源',
        type:'pie',
        radius : '100%',
        center: ['50%', '50%'],
        data:[
          {value:335, name:'酒店'},
          {value:310, name:'娱乐'},
          {value:274, name:'景点'},
          {value:235, name:'购物'},
          {value:400, name:'美食'}
        ].sort(function (a, b) { return a.value - b.value}),
        roseType: 'angle',
        label: {
          normal: {
            textStyle: {
              color: 'rgb(0,0,0)'
            }
          }
        },
        labelLine: {
          normal: {
            lineStyle: {
              color: 'rgb(0,0,0)'
            },
            smooth: 0.2,
            length: 10,
            length2: 20
          }
        },
        itemStyle: {
          normal: {
            color: '#c23531',
          }
        }
      }
    ]
  };

  // 设置图表选项
  myChart.setOption(option);
});
</script>

<style scoped lang="scss">
.bar-chart-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  padding: 20px;

  .bar-chart {
    width: 100%;
    height: 350px;
  }
}
</style>